<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.sx.pojo.Supplier" %>
<%@ page import="com.sx.pojo.Category" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- 引入 SweetAlert2 的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
<style>
    /* 整体页面背景设置为更柔和的天蓝色调，营造简洁科技感 */
    body {
        font-family: 'Roboto', Arial, sans-serif;
        background-color: #eaf3f9; /* 更柔和的蓝色背景 */
        margin: 0;
        padding: 0;
        color: #333;
    }

    /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
    .main-container {
        width: 90%;
        margin: 50px auto;
        padding: 40px;
        background-color: #f8f9fa; /* 更柔和的容器背景色 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 更淡的阴影效果 */
        border-radius: 10px; /* 减小圆角 */
    }

    /* 标题样式，字体大小、加粗、颜色及下边距 */
    h1 {
        font-size: 36px;
        font-weight: bold;
        color: #1976D2; /* 稍深的蓝色标题 */
        margin-bottom: 30px;
    }

    /* 表格容器，设置相对定位方便内部元素定位 */
    .table-container {
        position: relative;
        overflow-x: auto;
    }

    /* 表格样式，紧凑布局、边框、背景色及文本颜色 */
    table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
        background-color: #f9f9f9; /* 更淡的表格背景色 */
        color: #333;
    }

    /* 表头样式，背景色、文字颜色、内边距、边框及轻微阴影 */
    thead th {
        background-color: #1976D2; /* 稍深的蓝色表头背景 */
        color: #ffffff; /* 白色表头文字 */
        padding: 18px; /* 适当调整内边距 */
        border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 更淡的阴影效果 */
        text-align: center; /* 表头内容居中 */
    }

    /* 表格数据单元格样式，内边距、边框及鼠标悬停时的背景色变化 */
    tbody td {
        padding: 18px; /* 适当调整内边距 */
        border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
        transition: background-color 0.3s ease;
        font-size: 18px; /* 增大字体大小 */
        text-align: center; /* 表格数据内容居中 */
    }

    tbody td:hover {
        background-color: #e6e6e6;
    }

    /* 偶数行变色效果 */
    tbody tr:nth-child(even) {
        background-color: #f5f5f5; /* 更淡的偶数行背景色 */
    }

    /* 操作列样式，文本居中 */
    .operation {
        text-align: center;
    }

    /* 操作按钮通用样式，去除下划线、内边距、圆角、字体大小、
    颜色及过渡效果 */
    .operation a {
        text-decoration: none;
        padding: 12px 24px; /* 增大内边距 */
        border-radius: 5px;
        font-size: 16px; /* 增大字体大小 */
        color: white;
        transition: background-color 0.3s ease;
        margin-right: 10px; /* 适当调整间距 */
        display: inline-block;
    }

    /* 修改按钮样式，浅蓝色背景 */
    .operation a.update-link {
        background-color: #00bfff; /* 更淡的浅蓝色背景 */
    }

    /* 删除按钮样式，浅红色背景 */
    .operation a.delete-link {
        background-color: #ff6347; /* 更淡的浅红色背景 */
    }

    /* 按钮悬停效果，降低透明度 */
    .operation a:hover {
        opacity: 0.8;
    }

    /* 添加按钮样式，与整体风格协调，深蓝色背景 */
    .add-button {
        display: inline-block;
        text-decoration: none;
        padding: 12px 24px; /* 增大内边距 */
        border-radius: 5px;
        font-size: 18px; /* 增大字体大小 */
        color: white;
        background-color: #1565C0; /* 稍深的蓝色背景 */
        transition: background-color 0.3s ease;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 更淡的阴影效果 */
    }

    .add-button:hover {
        opacity: 0.8;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 更淡的阴影效果 */
    }

    /* 顶部按钮布局样式 */
    .button-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
<div class="main-container">
    <h1>信息列表</h1>
    <div class="table-container">
        <div class="button-container">
            <div>
                <a href="supplier.action?action=addSupplier" class="add-button">添加供应商</a>
            </div>
            <div>
                <a href="supplier.action?action=addCategory" class="add-button">添加商品类别</a>
            </div>
        </div>
        <table>
            <thead>
            <tr>
                <th>类型</th>
                <th>ID</th>
                <th>名称</th>
                <th>其他信息</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 循环展示供应商数据 -->
            <c:forEach items="${supplierList}" var="supplier">
                <tr>
                    <td>供应商</td>
                    <td>${supplier.id}</td>
                    <td>${supplier.name}</td>
                    <td>地址：${supplier.address}，号码：${supplier.phone}，状态：<c:choose><c:when
                            test="${supplier.state == 1}">在供货</c:when><c:otherwise>已停止供货</c:otherwise></c:choose></td>
                    <td class="operation">
                        <a href="supplier.action?action=update&id=${supplier.id}" class="update-link">修改</a>
                        <%--<a href="supplier.action?action=delete&id=${supplier.id}" class="delete-link"
                           onclick="return confirmDelete(this, 'supplier');">删除</a>--%>
                        <a href="#" class="delete-link"
                           data-id="${supplier.id}" onclick="return confirmDelete(this, 'supplier');">删除</a>
                    </td>
                </tr>
            </c:forEach>
            <!-- 循环展示商品类别数据 -->
            <c:forEach items="${categoryList}" var="category">
                <tr>
                    <td>商品类别</td>
                    <td>${category.id}</td>
                    <td>${category.name}</td>
                    <td>无</td>
                    <td class="operation">
                        <a href="category.action?action=update&id=${category.id}" class="update-link">修改</a>
                        <%--<a href="category.action?action=delete&id=${category.id}" class="delete-link"
                           onclick="return confirmDelete(this, 'category');">删除</a>--%>
                        <a href="#" class="delete-link"
                           data-id="${category.id}" onclick="return confirmDelete(this, 'category');">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入 SweetAlert2 的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script>
    function confirmDelete(link, type) {
        let message = '';
        if (type === 'supplier') {
            message = "此供应商相关信息将被删除，操作不可撤销！";
        } else if (type === 'category') {
            message = "此商品类别相关信息将被删除，操作不可撤销！";
        }
        Swal.fire({
            title: '确定要删除吗？',
            text: message,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "GET",
                    url: "/"+type+".action?action=delete&id=" + link.getAttribute("data-id"),
                    success: function (response) {
                        if (response.status === "success") {
                            Swal.fire({
                                icon: 'success',
                                title: '成功',
                                text: response.message
                            }).then(() => {
                                // 刷新到指定页面，例如 index.html
                                location.href = "/supplier.action?action=list";
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '失败',
                                text: response.message
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: '请求出错',
                            text: '出现网络问题或服务器错误，请稍后再试'
                        });
                    }
                });
            }
        });
        return false;
    }
</script>